// /refPage
// @/views/refPage/index.tsx 文件路径
import React, { useRef } from 'react'
import './index.less'
import Son from './components/son'
const RefPage = () => {
  const domRef:any = useRef(null)
  
  const getDomRef = () => {
    //domRef.current 就相当获取到了我们的dom节点
    console.log(domRef.current.innerText)
  }
  const sonRef:any = useRef(null)
  const changeSonHandle = ()=>{
    sonRef.current.changeStr(Math.random())
    console.log(sonRef.current)
  }
  return (
    <div className='ref_page'>
      <h1>useRef的常规用法</h1>
      <div className="box">
        获取基本的ref: <button onClick={getDomRef}>点我获取下面div的ref</button>
      </div>
      <div className='box' ref={domRef}>
        我要被输出了
      </div>

      <h2>组件ref</h2>
      <div className="box">
        通过调用子组件方法进行修改：<button onClick={changeSonHandle}>点我调用子组件方法</button>
      </div>
      <Son ref={sonRef}></Son>
    </div>
  )
}

export default RefPage